import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    useLocation,
    useHistory
} from "react-router-dom";
// Redirect
export default function(){
    return (
        <ProvideAuth>
            <Router>
                <div>
                    <AuthButton/>
                </div>
                <ul>
                    <li>
                        <Link to="/public">Public Page</Link>
                    </li>
                    <li>
                        <Link to="/protected">Protected Page</Link>
                    </li>
                </ul>
                <Switch>
                    <Route path="/public">
                        <PublicPage></PublicPage>
                    </Route>
                    <Route path="/login">
                        <LoginPage></LoginPage>
                    </Route>
                    <Route path="/protected">
                        <ProtectedPage></ProtectedPage>
                    </Route>
                </Switch>
            </Router>
        </ProvideAuth>
    );
}

function useAuth(){

}

function ProvideAuth(){
    return (
        <div>
            {children}
        </div>
    );
}

function PublicPage(){
    return <div>Public Page</div>
}

function LoginPage(){
    let history = useHistory();
    let location = useLocation();
    let auth = useAuth();
    console.log("history:");
    console.log(history);
    console.log("location:");
    console.log(location);
    return (
        <div>
            <p>You must log in to view the page at {from.pathname}</p>
            <button>Log In</button>
        </div>
    );
}

function ProtectedPage(){
    return <div>Public Page</div>
}

function AuthButton(){
    return (
        <p>Welcome!{" "}
        <button>Sign Out</button>
        </p>
    )
}